<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>例子</title>
    <link rel="stylesheet" href="base.css"/>
</head>
<body>

    <div id="div1">
        <button type="button" id="btn">触发</button>
    </div>

    <div>
        <a href="#" id="a1">取消默认事件</a>
    </div>

    <div>
        <ul id="ul1">
            <li class="li">元素1</li>
            <li class="li">元素2</li>
            <li class="li">元素3</li>
        </ul>
    </div>

    <div id="imgs">
        <img src="http://t2.hddhhn.com/uploads/tu/201607/136/ji4xvrfohfn.jpg" alt="" class="img"/>
        <img src="http://t2.hddhhn.com/uploads/tu/201607/136/ji4xvrfohfn.jpg" alt="" class="img"/>
        <img src="http://t2.hddhhn.com/uploads/tu/201607/136/ji4xvrfohfn.jpg" alt="" class="img"/>
    </div>
    <div>
        <img src="http://t2.hddhhn.com/uploads/tu/201607/136/ji4xvrfohfn.jpg" alt="" id="img1"/>
    </div>

    <script src="utils.min.js"></script>
    <script>

        //获取当前utils工具包本身
        console.log(utils.getSelf()) //例如：utils.getSelf().randString(3);

        //阻止事件冒泡
        document.getElementById("btn").onclick = function(e){
            utils.noEventBubbling(e);
            console.log("事件触发");
        };

        //取消默认事件
        document.getElementById("a1").onclick = function(e){
            utils.noDefaultEvent(e);
        };

        //对象克隆
        var oldobj = {"name":"tom"};
        var newobj = utils.clone(oldobj);
        console.log(newobj);
        newobj.name = "jick";
        console.log(oldobj);
        console.log(newobj);

        //获取当前时间
        var t1 = utils.datastring(utils.timeStamp(),true);
        console.log(t1,utils.timeStamp());

        //本地存储操作
        utils.setStoreage("key",{"name":"tom","age":26});
        var store1 = utils.getStoreage("key",true);
        console.log(store1);

        //生成随机数
        var randstr = utils.randString(3);
        console.log(randstr);

        //生成随机数
        var checkPass = utils.checkPass("3");
        console.log(checkPass);

        //验证非空
        console.log(utils.isEmpty("   ",true));

        //获取类
        document.getElementById("a1").onclick = function(e){
            utils.noDefaultEvent(e);
        };

        //给document添加getElementClassName方法
        console.log(utils.getElementClassName("li",document.getElementById("ul1")).length);

        //计算2个时间差
        console.log(utils.CountDown("2019-10-20 20:00:00",true));

        window.onload = function(){
            //等比例缩放图片大小，多张
            utils.AutoResizeImage(200,200,utils.getElementClassName("img",document.getElementById("imgs")));
            //等比例缩放图片大小，单张
            utils.AutoResizeImage(200,200,document.getElementById("img1"));
        }

        //让Array.prototype以下的方法可以操作任何对象
        utils.ArrayForObject();

        //要操作的对象
        var obj = {
            "length": 3,
            "0": 1,
            "1": 2,
            "2": 3
        };

        //例子：
        Array.push(obj, 4); // 向对象中添加一个元素
        console.log(obj.length); // 输出：4
        var first = Array.shift(obj); // 截取第一个元素
        console.log(first); // 输出：1
        console.log(obj); // 输出：{0: 2, 1: 3, 2: 4, length: 3}
        Array.forEach(obj, function (i, n) {
            console.log(n); // 分别输出：0, 1, 2
        });

        //测试，用户改变窗口大小后，避免频繁的掉用，这里设置500毫秒延迟
        window.onresize = utils.throttle(function () {
            console.log(1);
        }, 500);

        //分批处理函数，例子：创建100个div
        var renderFriendList = utils.timeChunk(100, function (n) {
            var div = document.createElement('div');
            div.innerHTML = n;
            document.body.appendChild(div);
        }, 8);
        renderFriendList();

    </script>
</body>
</html>